<script setup lang="ts">
import { ref, onMounted} from "vue"
import { ElButton, ElInput, ElRadio, ElRadioGroup } from 'element-plus';
const test_counter = ref(0);

// 错误写法: 没有响应式更新 所以函数无法改变 test_url 和 change_flag
/*
let test_url = "https://www.bing.com";
let change_flag = true;
*/
let test_url = ref( "https://www.bing.com" );
let change_flag = ref( true );
let multiVars = ref( {
    innerURL: "https://ts1.cn.mm.bing.net/th?id=ORMS.89c3550e76a366529c316ef34ae73e59&pid=Wdp&w=612&h=304&qlt=90&c=1&rs=1&dpr=1.25&p=0https://ts1.cn.mm.bing.net/th?id=ORMS.89c3550e76a366529c316ef34ae73e59&pid=Wdp&w=612&h=304&qlt=90&c=1&rs=1&dpr=1.25&p=0",
    innerCounter: 10
});

let input_text = ref("");
let picked = ref("none");
let picked2 = ref(1);

function changeURL(){
    if ( change_flag.value ){
        test_url.value = "https://www.bing.com";
        change_flag.value = false;
    } else {
        test_url.value = "https://www.google.com";
        change_flag.value = true;
    }
}
</script>

<template>
<header>
    <h1>Test Ref</h1>
    <!-- 链接可保留为普通HTML -->
    <a v-bind:href="test_url"> Click Me {{ test_url }}</a>
    <a :href="test_url"> Click Me x2 </a>
    
    <!-- Element Plus按钮 -->
    <el-button type="primary" @click="changeURL">
      Change URL {{ test_url }} {{ change_flag }}
    </el-button>
    
    <!-- 图片保留为普通HTML -->
    <img v-if="change_flag" src="https://jx.cdn.qhstatic.com/cimg.jpg?tid=132156&size=300x157&v2=1698808250&timg=https%3A%2F%2Fs3m4.mdvdns.com%2Fgalileo%2F16515f6525a6af2e7d7cbce3d436cd2a.gif_.webp&ver=2.4.2277&imageAuth=1bdce59bae6d471a3fe649dee785393d" alt="Bing Logo" />
    <img v-if="change_flag" v-bind:src="multiVars.innerURL" alt="oh no" />
    
    <br>
    <span style="font-size: larger; color: chocolate;">I want bitcoins !</span>
    <p style="white-space: pre-line;"> {{ input_text }} </p>
    
    <!-- Element Plus文本输入框 -->
    <el-input
      v-model="input_text"
      type="textarea"
      :rows="4"
      placeholder="input something"
    />
    
    <br>
    <div> Picked: {{ picked }} </div>
    
    <!-- Element Plus单选按钮组 -->
    <el-radio-group v-model="picked">
      <el-radio label="one">One</el-radio>
      <el-radio label="two">Two</el-radio>
    </el-radio-group>
    
    <br>
    
    <el-radio-group v-model="picked2">
      <el-radio :label="1">caocaocaocaocaocao</el-radio>
      <el-radio :label="2">aaaaaaaa</el-radio>
    </el-radio-group>
</header>
</template>

<style scoped>
/* 可以添加一些样式来优化Element Plus组件的显示 */
.el-button {
  margin: 10px 0;
}

.el-input {
  margin: 15px 0;
  max-width: 500px;
}

.el-radio-group {
  margin: 10px 0;
}
</style>